<template>
	<view class="page">
		<view class="xg-count">
			<view class="">
				<text>{{ clockList.length }}</text>
				<text>今日累计打卡</text>
			</view>
			<view class="">
				<text style="color: #F74D39;">{{ errCount }}</text>
				<text>异常点位</text>
			</view>
		</view>

		<view class="" v-if="clockList&&clockList.length>0">
			<view class="his-t">{{$u.timeFormat(Date.now())}}</view>
			<view style="background: #FFFFFF;padding: 48rpx 32rpx">
				<view class="hist-item" v-for="(item,index) in clockList" :key="index">
					<view class="hist-col">
						<view class="hist-col-l">
							<div class="hist-circle"></div>
						</view>
						<view class="hist-col-r">
							<view class=hist-time>{{ item.time }}</view>
							<view class="hist-c" @click="navTo('/pageSecurity/patrol/clockInfo?formData='+item.formData)"  :style="{color: item.state=='异常'?'#F74D39':'',background:item.state=='异常'?'rgba(247,77,57,0.09)':''}">
								<view>
									<u-icon name="map-fill" :color="item.state=='异常'?'#F74D39':'#B0B0B0'" size="28"></u-icon>
                  {{ item.qrCode }}
								</view>
								<view>
                  {{ item.inspectionTime }}
								</view>
								<view>
                  {{ item.state }}
								</view>
							</view>
						</view>
					</view>


				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        recordType:'巡逻',
				clockList: [],
        inspectionPerson:'',
        sucCount:0,
        errCount:0
			};
		},
    created() {
      this.userInfo =	uni.getStorageSync('userAc').userInfo
      this.inspectionPerson=this.userInfo.nickName
      this.getInspectionRecordList()
    },
    onLoad(op){
      console.log(op)
    },
    methods:{
      getInspectionRecordList(){
        let date=this.$u.timeFormat(Date.now(),'yyyy-mm-dd')
        this.apis.securityApi.inspectionRecordList({
          inspectionTime:date,
          inspectionPerson:this.inspectionPerson,
          recordType:"巡逻"
        }).then(res=>{
          let list=res.rows
          let sucCount=0
          let errCount=0
          list.forEach((item,index,arr)=>{
            item.time = item.inspectionTime.split(" ")[1]
            if (item.state=='正常'){
              sucCount+=1
            }else {
              errCount+=1
            }
          })
          this.sucCount=sucCount
          this.errCount=errCount
          this.clockList=list
        })
      },
      getHistoryList(){
        let date=this.formDate
        this.apis.securityApi.inspectionRecordList({
          inspectionTime:date,
          parkNum:this.parkNum
        }).then(res=>{
          let list=res.rows
          let errCount=0
          list.forEach((item,index,arr)=>{
            item.time=this.$u.timeFormat(item.inspectionTime,'hh:MM:ss')
            if (item.state!=='正常'){
              errCount+=1
            }
          })
          this.allCount=list.length
          this.errCount=errCount
          this.clockList=list
        })
      }
    }
  }
</script>

<style lang="scss">
	.xg-count {
		width: 100%;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 12px 12px 12px 12px;
		display: flex;
		margin-bottom: 20rpx;

		view {
			flex: 1;
			flex-shrink: 0;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&:first-child::after {
				position: absolute;
				top: 50%;
				right: 0;
				content: "";
				width: 2rpx;
				height: 60rpx;
				transform: translateY(-50%);
				background: #EEEEEE;
			}

			text:nth-child(1) {
				margin-bottom: 10rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				line-height: 42rpx;
			}

			text:nth-child(2) {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
				line-height: 30rpx;
			}
		}
	}

	.hist-item {
		width: 100%;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(13rpx);
      width: 2rpx;
      height: 100%;
      background: #EEEEEE;
      z-index: 0;
    }

		.hist-col {
			width: 100%;
			display: flex;

			.hist-col-l {
				height: 100%;
				width: 26rpx;
				position: relative;

				.hist-circle {
					position: absolute;
					top: 0;
					left: 0;
					width: 26rpx;
					height: 26rpx;
					background: #FFFFFF;
					opacity: 1;
					border: 4rpx solid #44D94B;
					border-radius: 50%;
					z-index: 1;
				}
			}
		}

		.hist-col-r {
			margin-left: 20rpx;

			.hist-time {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 33rpx;
			}

			.hist-c {
        margin: 20rpx 0;
				padding:20rpx;
				display: flex;
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
        background: #f8f8f8;
        border-radius: 12rpx;

				view:nth-child(2) {
					margin: 0 20rpx;
					width: 310rpx;
					text-align: center;
					position: relative;
					//border-left: 2rpx solid #eee;
					//border-right: 2rpx solid #eee;
				}
				view:nth-child(3) {
					margin: 0 20rpx;
				flex: 1;
					text-align: center;
					position: relative;
					//border-left: 2rpx solid #eee;
					//border-right: 2rpx solid #eee;
				}
			}

      .info{
        margin-bottom: 30rpx;
        width: 100%;
        border-radius: 12rpx;
        background: rgba(247, 77, 57, 0.03);
        padding: 20rpx;
        color: #F74D39;
      }
		}

		.err {
			height: 232rpx;
		}

	}

  .his-t{
    margin-bottom: 2rpx;
    border-radius: 12rpx;
    background: #fff;
    padding: 26rpx 32rpx;
    font-size: 28rpx;
    color: #333333
  }
</style>
